<template>
  <div>
    <NavBar :title="title" />
    <div class="content-top">
      <MyEmpty v-if="loading === false && list.length === 0" />
      <van-list
        class="my-quiz-list"
        v-model="loading"
        :finished="!loading"
        @load="load"
        v-else
      >
        <van-swipe-cell
          class="quiz-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <div class="item-show">
            <div class="quiz">
              <!-- 我的提问 -->
              <span>{{ item.ask }}</span>
              <span>{{ item.askDateStr }}</span>

              <!-- 企业回答 -->
              <template v-if="item.asnwer != null">
                <span>{{ item.asnwer }}</span>
                <span>{{ item.asnwerDateStr }}</span>
              </template>
            </div>
            <div class="firm" @click="onCompanyClick(item.companyid)">
              <img
                :src="item.companyLogo"
                alt=""
                v-if="item.companyLogo != ''"
              />
              <img src="@/assets/img/firm_default_avatar.png" alt="" v-else />
              <span>{{ item.companyName }}</span>
            </div>
          </div>
          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              style="height: 100%"
              @click="onDel(index, item.id)"
            />
          </template>
        </van-swipe-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/NavBar.vue";
import MyEmpty from "@/components/MyEmpty.vue";
import {
  PersonLoginedGetMyAskList,
  PersonLoginedDelMyAskList,
} from "@/util/http";
import {
  Image as VanImage,
  List,
  Toast,
  Dialog,
  SwipeCell,
  Button,
} from "vant";
import { mixin_person_toJobCompany } from "@/mixin/mixins";
export default {
  name: "AskList",
  components: {
    NavBar,
    MyEmpty,
    [VanImage.name]: VanImage,
    [List.name]: List,
    [SwipeCell.name]: SwipeCell,
    [Button.name]: Button,
  },
  props: ["title"],
  mixins: [mixin_person_toJobCompany],
  data() {
    return {
      loading: true,
      list: [],
    };
  },
  mounted() {
    this.load();
  },
  // 方法集合
  methods: {
    async load() {
      this.loading = true;
      await PersonLoginedGetMyAskList().then((res) => {
        // console.log(res)
        this.loading = false;
        this.list = res;
      });
    },
    onDel(index, id) {
      Dialog.confirm({
        message: "确认删除该问答？",
      })
        .then(() => {
          PersonLoginedDelMyAskList(id).then((res) => {
            Toast(res.msg);
            if (res.result === 1) {
              this.list.splice(index, 1);
            }
          });
        })
        .catch(() => {
          // on cancel
        });
    },
  },
};
</script>

<style lang="less">
@import "vant/lib/dialog/index.less";
@import "@/assets/css/common.less";

.my-quiz-list .quiz-item {
  background-color: #fff;
}

.my-quiz-list .quiz-item + .quiz-item {
  margin-top: 10px;
}

.my-quiz-list .quiz-item .item-show {
  padding: 0 15px;
}

.my-quiz-list .quiz-item .firm {
  position: relative;
  display: flex;
  align-items: center;
  height: 44px;
  padding-right: 20px;
  border-top: 0.5px solid #e8e8e8;
}

.my-quiz-list .quiz-item .firm::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 3px;
  width: 9px;
  height: 9px;
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  margin-top: -5px;
  transform: rotate(45deg);
}

.my-quiz-list .quiz-item .firm img {
  display: flex;
  flex: 0 0 22px;
  height: 22px;
  border-radius: 3px;
  margin-right: 8px;
}

.my-quiz-list .quiz-item .firm span {
  display: -webkit-box;
  flex: 1;
  font-size: 14px;
  color: #888;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.my-quiz-list .quiz-item .quiz {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}

.my-quiz-list .quiz-item .quiz span:nth-child(1),
.my-quiz-list .quiz-item .quiz span:nth-child(3) {
  padding-left: 28px;
  font-size: 15px;
}

.my-quiz-list .quiz-item .quiz span:nth-child(1) {
  background: url("@/assets/img/home/question-ico.png") no-repeat left 2px /
    20px;
}

.my-quiz-list .quiz-item .quiz span:nth-child(3) {
  margin-top: 10px;
  background: url("@/assets/img/home/answer-ico.png") no-repeat left 2px / 20px;
}

.my-quiz-list .quiz-item .quiz span:nth-child(2),
.my-quiz-list .quiz-item .quiz span:nth-child(4) {
  padding-left: 28px;
  margin-top: 4px;
  font-size: 13px;
  color: #bbb;
}
</style>